<template>
  <div>
    <!-- 创建按钮 -->
    <el-button type="primary" @click="openCreateDialog">创建资源</el-button>

    <!-- 表格显示资源 -->
    <el-table :data="resources" style="width: 100%" border>
<!--      <el-table-column prop="resourceId" label="资源ID" width="180"></el-table-column>-->
      <el-table-column prop="courseId" label="课程ID" width="180"></el-table-column>
      <el-table-column prop="courseName" label="课程名称" width="180"></el-table-column>
      <el-table-column prop="resourceName" label="资源名称" width="180"></el-table-column>
      <el-table-column prop="resourceType" label="资源类型" width="180"></el-table-column>

      <!-- URL 列，渲染为可点击链接 -->
      <el-table-column label="URL" width="300">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" style="color: #409EFF">{{ scope.row.url }}</a>
        </template>
      </el-table-column>

      <el-table-column prop="description" label="描述" width="300"></el-table-column>

      <!-- 操作按钮 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="openEditDialog(scope.row)" size="mini" type="warning">编辑</el-button>
          <el-button @click="deleteResource(scope.row.resourceId)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建/编辑资源的弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑资源' : '创建资源'">
      <el-form :model="form" label-width="100px">
        <el-form-item label="资源名称">
          <el-input v-model="form.resourceName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程ID">
          <el-input v-model="form.courseId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="form.courseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资源类型">
          <el-input v-model="form.resourceType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveResource">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      resources: [], // 存储资源列表
      form: {
        resourceId: null,
        courseId: '',
        courseName:'',
        resourceName: '',
        resourceType: '',
        url: '',
        description: ''
      },
      dialogVisible: false, // 控制弹窗显示
      isEdit: false, // 是否为编辑状态
    };
  },
  mounted() {
    this.fetchResources(); // 组件加载时获取资源
  },
  methods: {
    // 获取所有资源
    fetchResources() {
      axios.get('http://localhost:9000/resources/all')
          .then(response => {
            this.resources = response.data;
          })
          .catch(error => {
            console.error("获取资源失败", error);
          });
    },

    // 打开创建资源的弹窗
    openCreateDialog() {
      this.isEdit = false;
      this.form = { resourceId: null,courseId:'', courseName:'',resourceName: '', resourceType: '', url: '', description: '' };
      this.dialogVisible = true;
    },

    // 打开编辑资源的弹窗
    openEditDialog(resource) {
      this.isEdit = true;
      this.form = { ...resource }; // 填充表单数据
      this.dialogVisible = true;
    },

    // 保存资源（创建或更新）
    saveResource() {
      if (this.isEdit) {
        this.updateResource();
      } else {
        this.createResource();
      }
    },

    // 创建资源
    createResource() {
      axios.post('http://localhost:9000/resources/create', this.form)
          .then(response => {
            this.$message.success('资源创建成功');
            this.fetchResources(); // 重新获取资源列表
            this.dialogVisible = false;
          })
          .catch(error => {
            console.error("创建资源失败", error);
          });
    },

    // 更新资源
    updateResource() {
      axios.put(`http://localhost:9000/resources/${this.form.resourceId}`, this.form)
          .then(response => {
            this.$message.success('资源更新成功');
            this.fetchResources(); // 重新获取资源列表
            this.dialogVisible = false;
          })
          .catch(error => {
            console.error("更新资源失败", error);
          });
    },

    // 删除资源
    deleteResource(resourceId) {
      axios.delete(`http://localhost:9000/resources/${resourceId}`)
          .then(response => {
            this.$message.success('资源删除成功');
            this.fetchResources(); // 重新获取资源列表
          })
          .catch(error => {
            console.error("删除资源失败", error);
          });
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
